import React,{ Component } from 'react';
import {
	Text,
	Dimensions
} from 'react-native';
import Echarts from 'native-echarts';

const {width, heihgt} = Dimensions.get('window');

class BarChart extends Component{
	constructor(props){
		super(props);
		this.state = {
			option:{}
		};
	}

	formatter = (value)=>{
		return value.split("")[0]
	}

	getOption = (data) => {
		let xAxisData = this.getxAxisData(data);
		let legendData = this.getLegendData(data);
		let chartsData = this.getChartsData(data);
		let yAxisNameObj = this.getYxisName(data);

		option = {
    		title : {
        		show : false,
        		left: 'center',
        		textStyle : {
        			color: '#333',
        			fontSize: 14,
        			align: 'center',
        		}
        	},	
		    tooltip: {
		        trigger: 'axis',
		        confine: true,
		        axisPointer: {
		            type: 'none',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    backgroundColor:"#fff",
		    color : ['#47b86a','#b85fd1','#5fafd1','#5fd1aa'],
		    legend: {
		    	show:true,
		    	orient:'horizontal',
		    	type:'scroll',
		    	left:'center',
		    	top: 0,
		        data:legendData,
		    },
		    grid : {
		    	left:'5%',
		        right:'5%',
		        bottom:'30%',
		        top:'20%',
		        containLabel:true
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: xAxisData,
		            axisLabel:{
		            	interval: 0,
		            	rotate:45,
		            	fontSize:12,
		            	
		            },
		            axisPointer: { 
		                type: 'shadow'
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: yAxisNameObj.left,
		            minInterval:1,
		            axisLabel: {
		                formatter: '{value} '
		            },
		            splitLine:{show:false},
		            nameTextStyle:{align:'left'}
		        }
		    ],
		    series: chartsData
		};

		if (yAxisNameObj.right) {
			let rightY = {
				type: 'value',
	            name: yAxisNameObj.right,
	            minInterval:1,
	            axisLabel: {
	                formatter: '{value} '
	            },
	            splitLine:{show:false},
	            nameTextStyle:{align:'left'}
			}

			option.yAxis.push(rightY);
		}
		this.setState({ option })
	}

	getxAxisData = (data)=>{
		return data.xAxis
	}

    getLegendData = (data)=>{
    	return data.data.map((item)=>{
    		if(!item.type) return false;
    		return item.name
    	})
    }

    getYxisName = (data)=>{
    	
    	let yAxisNameObj = {
			left:'',
			right:''
        };	
		data.data.map((item,index)=>{

    		if(item.type == 'bar'){
    			yAxisNameObj.left += (index==0?'':'/')+item.name +"("+item.unit+")";
    		}else{
    			yAxisNameObj.right += (index==0?'':'/')+item.name+"("+item.unit+")";
    		}
    	});
    	
		yAxisNameObj.right=yAxisNameObj.right.substring(1);
    	return yAxisNameObj;
    }

    getChartsData = (data)=>{
    	return data.data.map((item)=>{
    		if(!item.type) return false;
    		if(item.type == "bar"){
    			return {
		    			name:item.name,
		    			type:item.type,
		    			data:item.data,
		    			barWidth:20,
		    			label:{
							normal:{
								show:true,
								position: 'top'
							}
		    			},
		    			itemStyle:{
		    				normal:{
		    					barBorderRadius: [6, 6, 0, 0],
		    					color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: '#f54545' // 0% 处的颜色
				                    }, {
				                        offset: 1,
				                        color: '#f57b45' // 100% 处的颜色
				                    }],
				                    globalCoord: false // 缺省为 false
				                },
		    				}
		    			}
		    		}
		    	}else{
		    		return {
		    			name:item.name,
		    			type:item.type,
		    			data:item.data,
		    			barWidth:20,
		    			label:{
							normal:{
								show: true,
								position: 'top'
							}
		    			},
		    			itemStyle:{
		    				normal:{
		    					barBorderRadius: [6, 6, 0, 0]
		    				}
		    			}
		    		}
		    	}
    		
    	})
    };

    componentDidMount(){
    	this.getOption(this.props.echartsData);
    }


    componentWillReceiveProps(nextProps) {
    	this.getOption(nextProps.echartsData);
    }

	render(){
		if(this.state.option){
		    return <Echarts option={this.state.option} height={240} width={width} />
		}else{
			return <Text>{"没有数据可显示"}</Text> 
		}
	}
}

export { BarChart }